<template>
  <div
    v-loading="loading"
    element-loading-text="正在对视频进行抽帧，请等待！"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(255, 255, 255, 0.8)"
  >
    <div>
      <el-card style="margin-bottom: 10px">
        <div
          style="
            display: flex;
            flex-direction: row;
            justify-content: space-between;
          "
        >
          <div>
            <div class="w-1 bg-blue-500 h-6 inline-block align-top mr-2"></div>
            <span style="color: #1074fd">视频合成</span>
          </div>
        </div>
      </el-card>
    </div>
    <div>
      <el-card>
        <el-form :inline="true" :model="formData">
          <el-form-item label="标题:">
            <el-input placeholder="请输入" v-model="formData.title"></el-input>
          </el-form-item>

          <el-form-item label="图片字幕:" style="margin-left: 14rem">
            <el-input placeholder="请输入" v-model="imgText"></el-input>
          </el-form-item>

          <el-form-item label="固定视频字幕:" style="margin-left: 14rem">
            <el-input placeholder="请输入" v-model="guVideoText"></el-input>
          </el-form-item>

          <el-form-item label="抽帧视频字幕:" style="margin-left: 14rem">
            <el-input placeholder="请输入" v-model="tsVideoText"></el-input>
          </el-form-item>

          <div class="mt-6">
            <el-form-item label="固定图片:">
              <el-upload
                ref="upload"
                :limit="1"
                action=""
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :http-request="httpRequest1"
              >
                <el-button type="primary">点击上传</el-button>
              </el-upload>
            </el-form-item>
            <el-form-item class="form_div">
              <span class="ml-6 flex flex-col">
                <span class="text-sm text-red-600">注：上传数量有限制</span>
                <span class="text-sm text-gray-500"
                  >仅支持上传jpg/png格式文件，单个文件不能超过50KB</span
                >
              </span>
            </el-form-item>
            <el-form-item v-if="isImg">
              <img
                :src="imgUrls"
                class="
                  object-fill
                  w-48
                  h-44
                  rounded-md
                  border-gray-300 border-2
                  img_div
                "
              />
            </el-form-item>
          </div>
          <!-- <div class="ml-10">
            <div>预览：</div>
            <div class="grid grid-cols-5 gap-4">
              <img
                :src="imgUrls"
                class="
                  object-fill
                  w-48
                  h-44
                  rounded-md
                  border-gray-300 border-2
                "
              />
            </div>
          </div> -->

          <!-- <div class="ml-10">
            <div>预览：</div>
            <div class="grid grid-cols-5 gap-4">
              <img
                v-for="item in showImgSrc"
                :src="item"
                :key="item"
                class="
                  object-fill
                  w-48
                  h-44
                  rounded-md
                  border-gray-300 border-2
                "
              />
            </div>
          </div> -->

          <div class="mt-6">
            <el-form-item label="固定视频:">
              <el-upload
                ref="upload"
                :limit="1"
                action=""
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :http-request="httpRequest2"
              >
                <el-button type="primary">点击上传</el-button>
              </el-upload>
            </el-form-item>
            <el-form-item class="form_div">
              <span class="ml-6 flex flex-col">
                <span class="text-sm text-red-600">注：上传数量有限制</span>
                <span class="text-sm text-gray-500"
                  >仅支持上传mp4/mov格式文件，单个文件不能超过50MB</span
                >
              </span>
            </el-form-item>
            <el-form-item v-if="isGuVideo">
              <video
                controls
                muted
                :src="guVideoUrl"
                class="
                  object-fill
                  w-48
                  h-44
                  rounded-md
                  border-gray-300 border-2
                  video_div
                "
              ></video>
            </el-form-item>
          </div>
          <!-- <div class="ml-10">
            <div>预览：</div>
            <div class="grid grid-cols-5 gap-4">
              <video
                v-for="item in showVideoSrc"
                controls
                muted
                autoplay="autoplay"
                :src="item"
                :key="item"
                class="
                  object-fill
                  w-48
                  h-44
                  rounded-md
                  border-gray-300 border-2
                "
              ></video>
            </div>
          </div> -->

          <div class="mt-6">
            <el-form-item label="抽帧视频:">
              <el-upload
                ref="upload"
                :limit="1"
                action=""
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :http-request="httpRequest3"
                :auto-upload="false"
              >
                <el-button type="primary">点击上传</el-button>
              </el-upload>
            </el-form-item>
            <el-form-item class="form_div">
              <span class="ml-6 flex flex-col">
                <span class="text-sm text-red-600">注：上传数量有限制</span>
                <span class="text-sm text-gray-500"
                  >仅支持上传mp4/mov格式文件，单个文件不能超过50MB</span
                >
              </span>
            </el-form-item>
            <el-form-item>
              <!-- <video
                v-for="(item, index) in tsVideoUrlList2"
                :key="index"
                controls
                muted
                :src="item"
                class="
                  object-fill
                  w-48
                  h-44
                  rounded-md
                  border-gray-300 border-2
                  video_div
                "
              ></video> -->
              <div
                v-if="isTsVideo"
                class="
                  object-fill
                  w-48
                  h-44
                  rounded-md
                  border-gray-300 border-2
                  video_div2
                "
              >
                {{ videoMsg }}
              </div>
            </el-form-item>
          </div>
          <!-- <div class="ml-10">
            <div>预览：</div>
            <div class="grid grid-cols-5 gap-4">
              <video
                v-for="item in showVideoSrc"
                controls
                muted
                autoplay="autoplay"
                :src="item"
                :key="item"
                class="
                  object-fill
                  w-48
                  h-44
                  rounded-md
                  border-gray-300 border-2
                "
              ></video>
            </div>
          </div> -->

          <div class="mt-6">
            <el-form-item>
              <span>固定视频时长：</span>
              <span>0秒</span>
              <el-form-item>
                <el-slider
                  v-model="duration"
                  :min="0"
                  :max="60"
                  class="w-96 px-2"
                ></el-slider>
              </el-form-item>
              <span class="s60_span">60秒</span>
            </el-form-item>
            <el-form-item class="ml-28">
              <el-radio v-model="radio" label="1">竖视频</el-radio>
              <el-radio v-model="radio" label="2">横视频</el-radio>
            </el-form-item>
            <el-form-item class="ml-28 num_div">
              <span>生成视频个数：</span>
              <el-input-number
                v-model="videoNum"
                :min="0"
                :max="videoNumLimit"
                label="描述文字"
              ></el-input-number>
              <span style="margin-left: 20px"
                >可制作视频总数：{{ videoNumLimit }}</span
              >
            </el-form-item>
          </div>
          <div class="ml-10">
            <el-form-item>
              <!-- <el-button type="primary" @click="addVideo">提交</el-button> -->
              <el-button type="primary" @click="submitUpload"
                >上传到服务器</el-button
              >
              <el-button
                type="primary"
                @click="createVideo"
                :disabled="isDisabled"
                >合成视频</el-button
              >
              <!-- <el-button type="primary" @click="updateVideo">修改</el-button> -->
            </el-form-item>
          </div>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
import video from "@/network/api/video";
import axios from "axios";

export default {
  name: "index",
  data() {
    return {
      formData: {
        title: "",
      },
      imgData: {
        organId: JSON.parse(localStorage.getItem("updateUserInfo")).organId,
      },
      // imgAxiosUrl: "http://localhost:5024/uploadImg",
      // imgAxiosUrl: "http://39.98.117.110:5024/uploadImg",
      // imgAxiosUrl: "http://192.168.124.20:5024/uploadImg",
      // imgAxiosUrl: "http://192.168.124.30:5024/uploadImg",
      // imgAxiosUrl: "http://103.206.203.140:5024/uploadImg",
      // imgAxiosUrl: "http://103.206.203.140:5024/uploadImg",
      guVideoData: {
        organId: JSON.parse(localStorage.getItem("updateUserInfo")).organId,
        wbh: 1,
      },
      // guVideoAxiosUrl: "http://localhost:5024/uploadGu",
      // guVideoAxiosUrl: "http://39.98.117.110:5024/uploadGu",
      // guVideoAxiosUrl: "http://192.168.124.20:5024/uploadGu",
      // guVideoAxiosUrl: "http://192.168.124.30:5024/uploadGu",
      // guVideoAxiosUrl: "http://103.206.203.140:5024/uploadGu",
      // uploadUrl: "http://192.168.1.6:9020/qk/upload/app",
      imgSrc: [],
      videoSrc: [],
      showVideoSrc: [],
      showImgSrc: [],
      duration: 30,
      videoNum: 0,
      // videoNumLimit: 0,
      videoNumLimit: 500,
      imgUrls: "",
      guVideoUrl: "",
      tsVideoUrlList: [],
      tsVideoUrlList2: [],
      radio: "1",
      isImg: false,
      isGuVideo: false,
      isTsVideo: false,
      isDisabled: true,
      videoMsg: "",
      loading: false,
      imgText: '',
      guVideoText: '',
      tsVideoText: '',
      audio: [
        'http://ds.download.aikeai.group/node_242_1654070321115.mp3',
        'http://ds.download.aikeai.group/node_242_1654070321722.mp3',
        'http://ds.download.aikeai.group/node_242_1654070322397.mp3',
        'http://ds.download.aikeai.group/node_242_1654070323689.mp3',
        'http://ds.download.aikeai.group/node_242_1654070323892.mp3',
        'http://ds.download.aikeai.group/node_242_1654070615048.mp3',
        'http://ds.download.aikeai.group/node_242_1654070616777.mp3',
        'http://ds.download.aikeai.group/node_242_1654070618038.mp3',
        'http://ds.download.aikeai.group/node_242_1654070618218.mp3',
        'http://ds.download.aikeai.group/node_242_1654070684421.mp3',
        'http://ds.download.aikeai.group/node_242_1654070689093.mp3',
        'http://ds.download.aikeai.group/node_242_1654070689815.mp3',
        'http://ds.download.aikeai.group/node_242_1654070690588.mp3',
        'http://ds.download.aikeai.group/node_242_1654070690757.mp3',
        'http://ds.download.aikeai.group/node_242_1654070760337.mp3',
        'http://ds.download.aikeai.group/node_242_1654070761257.mp3',
        'http://ds.download.aikeai.group/node_242_1654070762003.mp3',
        'http://ds.download.aikeai.group/node_242_1654070762082.mp3',
        'http://ds.download.aikeai.group/node_242_1654070763718.mp3',
        'http://ds.download.aikeai.group/node_242_1654070849150.mp3',
        'http://ds.download.aikeai.group/node_242_1654070851859.mp3',
        'http://ds.download.aikeai.group/node_242_1654070852114.mp3',
        'http://ds.download.aikeai.group/node_242_1654070854031.mp3',
        'http://ds.download.aikeai.group/node_242_1654070854637.mp3',
        'http://ds.download.aikeai.group/node_242_1654070921207.mp3',
        'http://ds.download.aikeai.group/node_242_1654070922987.mp3',
        'http://ds.download.aikeai.group/node_242_1654070923369.mp3',
        'http://ds.download.aikeai.group/node_242_1654070923449.mp3',
        'http://ds.download.aikeai.group/node_242_1654070923695.mp3',
        'http://ds.download.aikeai.group/node_242_1654071036967.mp3',
        'http://ds.download.aikeai.group/node_242_1654071038236.mp3',
        'http://ds.download.aikeai.group/node_242_1654071037852.mp3',
        'http://ds.download.aikeai.group/node_242_1654071038582.mp3',
        'http://ds.download.aikeai.group/node_242_1654071038709.mp3',
        'http://ds.download.aikeai.group/node_242_1654071040994.mp3',
        'http://ds.download.aikeai.group/node_242_1654071042270.mp3',
        'http://ds.download.aikeai.group/node_242_1654071043372.mp3',
        'http://ds.download.aikeai.group/node_242_1654071044201.mp3',
      ]
    };
  },
  methods: {
    uploadImgSuccess(res, file) {
      this.imgSrc.push(res.data);
      this.showImgSrc.push(res.data);
      console.log(res);
    },
    uploadVideoSuccess(res, file) {
      this.videoSrc.push(res.data);
      console.log(res);
    },
    addVideo() {
      let videoSrc = "";
      let imgSrc = "";
      this.videoSrc.forEach((item) => {
        videoSrc += item + ";";
      });
      this.imgSrc.forEach((item) => {
        videoSrc += item + ";";
      });
      const info = JSON.parse(localStorage.getItem("updateUserInfo"));
      const data = {
        organId: info.organId,
        name: this.formData.title,
        videoUrls: videoSrc,
        imgUrls: imgSrc,
        duration: this.duration,
        num: this.videoNum,
      };
      video.addVideo(data).then((res) => {
        console.log(res);
        this.$router.push("/ems/VideoSynthesis/VideoManagement");
      });
    },
    updateVideo() {
      let videoSrc = "";
      let imgSrc = "";
      this.videoSrc.forEach((item) => {
        videoSrc += item + ";";
      });
      this.imgSrc.forEach((item) => {
        videoSrc += item + ";";
      });
      const info = JSON.parse(localStorage.getItem("updateUserInfo"));
      const id = localStorage.getItem("VideoId");
      const data = {
        id: id,
        organId: info.organId,
        name: this.formData.title,
        videoUrls: videoSrc,
        imgUrls: imgSrc,
        duration: this.duration,
        status: "",
        url: "",
      };
      video.updateVideo(data).then((res) => {
        console.log(res);
      });
    },
    queryUseable() {
      const info = JSON.parse(localStorage.getItem("updateUserInfo"));
      const data = {
        organId: info.organId,
      };
      video.queryUsable(data).then((res) => {
        console.log(res);
        this.videoNumLimit = res.data.data;
      });
    },

    submitUpload() {
      if (this.formData.title === "") {
        this.$message({
          message: "标题不能为空，请输入标题",
          type: "warning",
        });
      } else {
        this.$refs.upload.submit();
        this.loading = true;
      }
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },

    httpRequest1(param) {
      // console.log(param);
      const info = JSON.parse(localStorage.getItem("updateUserInfo"));
      let fileObj = param.file; // 相当于input里取得的files
      console.log(fileObj);
      let fd = new FormData(); // FormData 对象
      fd.append("file", fileObj); // 文件对象
      fd.append("organId", info.organId); // 用户Id
      fd.append("wbh", 1); // 横竖视频
      fd.append("duration", this.duration); // 视频时长
      fd.append("num", this.videoNum); // 合成视频数量
      fd.append("title", this.formData.title); // 标题

      let url = "http://103.206.203.140:5025/videoTask/imgCutting";
      let config = {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      };
      axios.post(url, fd, config).then((res) => {
        console.log(res);
        this.imgUrls = res.data.data;
        console.log(this.imgUrls);
        this.isImg = true;
        if (res.code === 0) {
          this.submitForm(); //提交表单
        }
      });
    },

    httpRequest2(param) {
      // console.log(param);
      const info = JSON.parse(localStorage.getItem("updateUserInfo"));
      let fileObj = param.file; // 相当于input里取得的files
      console.log(fileObj);
      let fd = new FormData(); // FormData 对象
      fd.append("file", fileObj); // 文件对象
      fd.append("organId", info.organId); // 用户Id
      fd.append("wbh", 1); // 横竖视频
      fd.append("duration", this.duration); // 视频时长
      fd.append("num", this.videoNum); // 合成视频数量
      fd.append("title", this.formData.title); // 标题

      let url = "http://103.206.203.140:5025/videoTask/guvideoCutting";
      let config = {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      };
      axios.post(url, fd, config).then((res) => {
        console.log(res);
        this.guVideoUrl = res.data.data;
        console.log(this.guVideoUrl);
        this.isGuVideo = true;
        if (res.code === 0) {
          this.submitForm(); //提交表单
        }
      });
    },

    httpRequest3(param) {
      // console.log(param);
      const info = JSON.parse(localStorage.getItem("updateUserInfo"));
      let fileObj = param.file; // 相当于input里取得的files
      console.log(fileObj);
      let fd = new FormData(); // FormData 对象
      fd.append("file", fileObj); // 文件对象
      fd.append("organId", info.organId); // 用户Id
      fd.append("wbh", 1); // 横竖视频
      fd.append("duration", this.duration); // 视频时长
      fd.append("num", this.videoNum); // 合成视频数量
      fd.append("title", this.formData.title); // 标题

      let url = "http://103.206.203.140:5025/videoTask/tsCutting";
      let config = {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      };
      axios.post(url, fd, config).then((res) => {
        console.log(res);
        this.tsVideoUrlList = res.data.data;
        console.log(this.tsVideoUrlList);
        console.log(this.videoNum);
        if (this.tsVideoUrlList.length >= this.videoNum) {
          this.$message({
            message: res.data.msg,
            type: "success",
            duration: 2000,
          });
          this.isDisabled = false;
          this.videoMsg = res.data.msg;
        } else {
          this.isDisabled = true;
          this.videoMsg = res.data.msg;
          this.$message({
            message: "抽帧视频不足，请从新选择则抽帧视频",
            type: "waring",
            duration: 2000,
          });
        }
        this.isDisabled = false;
        this.loading = false;
        this.isTsVideo = true;
        if (res.code === 0) {
          this.submitForm(); //提交表单
        }
      });
    },

    createVideo() {
      if (this.radio == 1) {
        console.log("当前为竖视频");
        const taskArray = [];
        const make = Math.floor(Math.random() * 1000000000000000000);
        const info = JSON.parse(localStorage.getItem("updateUserInfo"));
        for (let i = 0; i < this.videoNum; i++) {
        const make2 = Math.floor(Math.random() * 1000000000000000000);
          const data = {
            bgm: this.audio[i],
            bgmName: "20努力工作吧.mp3",
            // cp: "http://pic.aikeai.group/7488fc0331bf4611b76c424f5e7a1b4e.MOV&1",
            // cp: "http://ds.download.aikeai.group/node_242_1651917083361.mp4&1",
            cp: this.guVideoUrl + "&0",
            cpText: this.guVideoText,
            cpType: "video",
            fmPath: "",
            // hj: "http://ds.download.aikeai.group/node_242_1651917375235.mp4&1",
            // hj: "http://ds.download.aikeai.group/node_242_1651917375235.mp4&1",
            hj: this.tsVideoUrlList[i] + "&0",
            hjText: this.tsVideoText,
            hjType: "video",
            // md: "http://pic.aikeai.group/56522b7a5fc0498fa32898ec5eb53a61.jpeg&0,http://pic.aikeai.group/4831b11e3d794f309e45b95899de0e95.jpeg&0,http://pic.aikeai.group/3855b36e8950498cb6e6572a66a2952d.jpeg&0,http://pic.aikeai.group/3eae4bb4d41145e5b5ae807ac5872dfe.jpeg&0,http://pic.aikeai.group/eac10a64a6314adfaa00d7359136b1af.webp&0",
            md: this.imgUrls + "&0",
            mdText: this.imgText,
            mdType: "img",
            taskId: `${info.organId}${make2}`,
            organId: info.organId,
            roomPath: "0",
            roomText: "",
            // templatePath: "http://pic.aikeai.group/node_521_1651886720488.mp4",
            // templateStatus: 3,
            // videoName: "",

            num: this.videoNum + "",
            make: make + "",
            name2: this.formData.title + "",
          };
          if (data.hj.length !== 0) {
            taskArray.push(data);
          }
        }
        console.log(taskArray);
        const taskData = { taskArray };
        // taskData.taskArray = taskArray
        console.log(taskData);
        axios
          .post("http://103.206.203.140:5025/videoTask/videoComplate", taskData)
          .then((res) => {
            console.log(res);
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        console.log("当前为横视频");
        const taskArray = [];
        const make = Math.floor(Math.random() * 1000000000000000000);
        const info = JSON.parse(localStorage.getItem("updateUserInfo"));
        for (let i = 0; i < this.videoNum; i++) {
        const make2 = Math.floor(Math.random() * 1000000000000000000);
          const data = {
            bgm: this.audio[i],
            bgmName: "20努力工作吧.mp3",
            // cp: "http://pic.aikeai.group/7488fc0331bf4611b76c424f5e7a1b4e.MOV&1",
            // cp: "http://ds.download.aikeai.group/node_242_1651917083361.mp4&1",
            cp: this.guVideoUrl + "&1",
            cpText: this.guVideoText,
            cpType: "video",
            fmPath: "",
            // hj: "http://ds.download.aikeai.group/node_242_1651917375235.mp4&1",
            // hj: "http://ds.download.aikeai.group/node_242_1651917375235.mp4&1",
            hj: this.tsVideoUrlList[i] + "&1",
            hjText: this.tsVideoText,
            hjType: "video",
            // md: "http://pic.aikeai.group/56522b7a5fc0498fa32898ec5eb53a61.jpeg&0,http://pic.aikeai.group/4831b11e3d794f309e45b95899de0e95.jpeg&0,http://pic.aikeai.group/3855b36e8950498cb6e6572a66a2952d.jpeg&0,http://pic.aikeai.group/3eae4bb4d41145e5b5ae807ac5872dfe.jpeg&0,http://pic.aikeai.group/eac10a64a6314adfaa00d7359136b1af.webp&0",
            md: this.imgUrls + "&1",
            mdText: this.imgText,
            mdType: "img",
            taskId: `${info.organId}${make2}`,
            organId: info.organId,
            roomPath: "l",
            roomText: "",
            // templatePath: "http://pic.aikeai.group/node_521_1651886720488.mp4",
            // templateStatus: 3,
            // videoName: "",

            num: this.videoNum + "",
            make: make + "",
            name2: this.formData.title + "",
          };
          taskArray.push(data);
        }
        console.log(taskArray);
        const taskData = { taskArray };
        // taskData.taskArray = taskArray
        console.log(taskData);
        axios
          .post("http://103.206.203.140:5025/videoTask/videoComplate", taskData)
          .then((res) => {
            console.log(res);
            this.$message({
              message: res.data.message,
              type: "success",
              duration: 2000
            });
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
  },
  mounted() {
    this.queryUseable();
  },
};
</script>

<style scoped>
.img_div {
  width: auto;
  height: 5rem;
  margin-left: 400px;
}

.video_div {
  width: 5rem;
  height: 5rem;
  margin-left: 400px;
}

.video_div2 {
  width: 12rem;
  height: 5rem;
  margin-left: 400px;
}

/deep/.el-form-item__content {
  position: fixed;
}

.form_div {
  margin-left: 100px;
}

.mt-6 {
  margin-bottom: 3rem;
  justify-content: center;
}

.ml-28 {
  margin-left: 37rem;
}

.num_div {
  margin-left: 13rem;
}

.s60_span {
  margin-left: 24rem;
}

.ml-10 {
  margin-bottom: 2rem;
}

/deep/.el-upload-list__item-name {
  width: 468px;
}
</style>